<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>With jQuery UI</title>
		<style>
			body {
				font-size: 12px;
			}
			form {
				margin: 0;
			}
			textarea {
				display: block;
			}
			#J_editorDialog {
				display: none;
			}
		</style>
		<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" />
		<script charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
		<script charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
		<script charset="utf-8" src="../kindeditor-min.js"></script>
		<script charset="utf-8" src="../lang/zh_CN.js"></script>
		<script>
			$(function() {
				$('#J_openDialog').click(function() {
					$('#J_editorDialog').dialog({
						title : 'KindEditor',
						width : 700,
						open : function(event, ui) {
							// 打开Dialog后创建编辑器
							KindEditor.create('textarea[name="content"]', {
								resizeType : 1
							});
						},
						beforeClose : function(event, ui) {
							// 关闭Dialog前移除编辑器
							KindEditor.remove('textarea[name="content"]');
						}
					});
				});
			});
		</script>
	</head>
	<body>
		<h3>在jQuery UI Dialog里打开编辑器</h3>
		<div id="J_editorDialog">
			<textarea name="content" style="width:100%;height:200px;"></textarea>
		</div>
		<button type="button" id="J_openDialog">打开Dialog</button>
	</body>
</html>
